<template>
    <div class="main">
        <div class="main-div">
            <!-- 筛选器区域 -->
            <div class="filters">
                <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" class="w-80" />
                <el-select v-model="subject" placeholder="选择科目" class="w-40">
                    <el-option v-for="item in subjects" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="homework">
                    <el-input v-model="searchText" placeholder="搜索作业" class="search">
                        <template #suffix>
                            <el-icon>
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>
                </div>
                <el-button type="primary" class="select">
                    <el-icon class="select-icon">
                        <Search />
                    </el-icon>
                    筛选
                </el-button>
            </div>

            <!-- 作业列表 -->
            <div class="list-jobs">
                <div v-for="homework in homeworks" :key="homework.id" @click="openHomework(homework)"
                    class="list-jobs-div">
                    <div class="tag">
                        <span class="tag-div">{{ homework.subject }}</span>
                        <el-tag :type="homework.status === '已完成' ? 'success' : 'warning'" size="small">
                            {{ homework.status }}
                        </el-tag>
                    </div>
                    <h3 class="homework-title">{{ homework.title }}</h3>
                    <p class="homework-description">{{ homework.description }}</p>
                    <div class="homework-status">
                        <span>截止日期: {{ homework.deadline }}</span>
                        <span>完成率: {{ homework.completion }}%</span>
                    </div>
                </div>
            </div>

            <!-- 添加作业按钮 -->
            <el-button type="primary" class="add-homework-button"
                @click="showAddDialog = true">
                <el-icon class="text">
                    <Plus />
                </el-icon>
            </el-button>
        </div>

        <!-- 添加作业对话框 -->
        <el-dialog v-model="showAddDialog" title="添加新作业" width="500px">
            <el-form :model="newHomework" label-width="100px">
                <el-form-item label="作业标题">
                    <el-input v-model="newHomework.title" placeholder="请输入作业标题" />
                </el-form-item>
                <el-form-item label="科目">
                    <el-select v-model="newHomework.subject" placeholder="请选择科目" style="width: 100%">
                        <el-option v-for="item in subjects" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="截止日期">
                    <el-date-picker v-model="newHomework.deadline" type="datetime" placeholder="选择截止日期"
                    style="width: 100%" />
                </el-form-item>
                <el-form-item label="作业描述">
                    <el-input v-model="newHomework.description" type="textarea" rows="4" placeholder="请输入作业描述" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showAddDialog = false">取消</el-button>
                    <el-button type="primary" @click="addHomework" style="white-space: nowrap">
                        确认添加
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Search, Plus } from '@element-plus/icons-vue';

const dateRange = ref([]);
const subject = ref('');
const searchText = ref('');
const showAddDialog = ref(false);

const subjects = [
    { value: 'math', label: '数学' },
    { value: 'chinese', label: '语文' },
    { value: 'english', label: '英语' },
    { value: 'physics', label: '物理' },
    { value: 'chemistry', label: '化学' },
];

const homeworks = ref([
    {
        id: 1,
        title: '二次函数图像的性质研究',
        subject: '数学',
        description: '通过具体示例分析二次函数图像的平移、伸缩变换规律',
        deadline: '2024-01-20 23:59',
        status: '进行中',
        completion: 65
    },
    {
        id: 2,
        title: '现代诗歌赏析与创作',
        subject: '语文',
        description: '阅读并分析徐志摩、海子等现代诗人的代表作品，尝试创作现代诗',
        deadline: '2024-01-18 23:59',
        status: '已完成',
        completion: 100
    },
    {
        id: 3,
        title: '牛顿运动定律实验报告',
        subject: '物理',
        description: '设计并完成验证牛顿第二定律的实验，撰写实验报告',
        deadline: '2024-01-22 23:59',
        status: '进行中',
        completion: 30
    },
    {
        id: 4,
        title: '化学平衡移动规律探究',
        subject: '化学',
        description: '探究温度、压强、浓度对化学平衡的影响',
        deadline: '2024-01-21 23:59',
        status: '进行中',
        completion: 45
    },
    {
        id: 5,
        title: 'English Reading Comprehension',
        subject: '英语',
        description: '完成科技文章阅读理解练习，重点掌握专业词汇',
        deadline: '2024-01-19 23:59',
        status: '已完成',
        completion: 100
    },
    {
        id: 6,
        title: '概率统计应用题专项训练',
        subject: '数学',
        description: '完成20道概率统计应用题，重点关注解题思路的总结',
        deadline: '2024-01-23 23:59',
        status: '进行中',
        completion: 15
    }
]);

const newHomework = ref({
    title: '',
    subject: '',
    deadline: '',
    description: ''
});

const openHomework = (homework: any) => {
    emit('select-homework', homework.title);
};

const emit = defineEmits(['select-homework']);

const addHomework = () => {
    showAddDialog.value = false;
    // 这里添加新作业的逻辑
};
</script>

<style scoped>
.el-input :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #e5e7eb;
}

.el-input :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #3b82f6;
}

.el-select :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #e5e7eb;
}

.el-select :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #3b82f6;
}
.main {
    min-height: 100vh;
    background-color: #F9FAFB;
}

.top-navigation {
    background-color: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.main-div {
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    margin: 0 auto;

    @media (min-width: 640px) {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    @media (min-width: 1024px) {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
.filters {
    display: flex;
    /* margin-top: 1rem; */
    margin-bottom: 2rem;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
}

.w-80 {
    width: 300px;
    max-width: 100%;
}
.w-40 {
    width: 200px;
    max-width: 100%;
}

.homework {
    position: relative;
    flex: 1 1 300px;
    min-width: 200px;
}
.search{
    width: 100%; 
}
.select{
    white-space: nowrap; 
}
.select-icon{
    margin-right: 0.25rem; 
}
.list-jobs {
    display: grid;
    gap: 1.5rem;
    margin-bottom:10px;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.list-jobs-div {
    overflow: hidden;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.list-jobs-div:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.tag {
    display: flex;
    margin-bottom: 1rem;
    justify-content: space-between;
    align-items: center;
}

.tag-div {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #2563EB;
}
.homework-title {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    color: #111827;
}
.homework-description {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #6B7280;
}
.homework-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #6B7280;
}
.add-homework-button {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}
.text {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

@media (max-width: 768px) {
    .filters {
        flex-direction: column;
        align-items: stretch;
    }

    .w-80, .w-40, .homework {
        width: 100%;
    }

    .select {
        width: 100%;
    }
}
</style>